<script setup lang="ts">
interface AnalysisOverviewItem {
  title: string;
  firstTitle: string;
  firstValue: number;
  secondTitle: string;
  secondValue: number;
}

import { Card } from 'ant-design-vue';

interface Props {
  items: AnalysisOverviewItem[];
}

defineOptions({
  name: 'AnalysisOverview',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});
</script>

<template>
  <div class="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
    <template v-for="item in items" :key="item.title">
      <Card :title="item.title" class="w-full">
        <div class="flex items-center justify-between">
          <span>{{ item.firstTitle }}</span>
          <span>{{ item.firstValue }}</span>
        </div>

        <div class="flex items-center justify-between">
          <span>{{ item.secondTitle }}</span>
          <span>{{ item.secondValue }}</span>
        </div>
      </Card>
    </template>
  </div>
</template>
